<!doctype html>
<html>
<head>
<title>违章查询</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="wangchunpeng">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="${ctx}/resource/css/style.css" media="screen"/>
<script type="text/javascript" src="${ctx}/resource/js/zepto.min.v1.js"></script>
<script type="text/javascript" src="${ctx}/resource/js/common-1.0.js"></script>
<script type="text/javascript" src="${ctx}/resource/js/budingweiche.v1.1.js"></script>
<script type="text/javascript">
    var TAP = ("WEB"=="WEB")?"mousedown":"tap";
    var EnablE = true;
    var dataForWeixin={
    	     appId:'wx29e576d65e718bd8',
    	        timeLineTitle:'违章查询，尽在【全国交通网】公众帐号！',
    	        appMsgTitle:document.title,
    	        appMsgDesc:'违章查询，尽在【全国交通网】公众帐号！',
        imgUrl:"http://img.buding.cn/common/2014/04/24/9af57ff45e88c1a19e6d6add88e80e2d.jpeg",
        link:location.href
    };
    var callbacksForWeixin={
        ready:function () {},
        cancel:function (resp) {},
        fail:function (resp) {},
        confirm:function (resp) {},
        all:function (resp) {},
        globalConfirm:function(resp){
            $.post('json.asp?action=hi');
        }
    };
</script>
</head>
<body>
<div id="wrap"><style>

/* Swipe 2 required styles */

/*#header {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
  line-height: 0;
}
#header img {
}
*//* END required styles */

.swipe-wrap div,
.swipe-wrap div a {line-height: 0;}

</style>
<div id="header">
  <div class="swipe-wrap">
    <div>
         <a target="_blank" href="#">
         <img src="${ctx}/resource/css/m.jpg" width="100%"></a>
      </div>
      <!-- <div>
         <img src="http://img.buding.cn/common/2014/04/25/045873a94f1f2138d185701b8c718ce7.jpeg" width="100%">
         <div class="linkto">
              <a target="_blank" href="http://dl.weiche.me/channel/buding"><img class="downloadbtn"  src="http://img.buding.cn/coupon/2013/09/17/36bfd48b01795c4e0b4d21fbe780abc3.png" /></a>
         </div>
      </div> -->
   </div>
</div>

<script type="text/javascript">
	/*
    var followloop;
    window.onload=function(){
        followloop = setInterval(function(){
            Jax.follow();
        },1000);
    }
    */

/*
  var elem = document.getElementById('header');
  window.mySwipe = Swipe(elem, {
     // startSlide: 0,
     auto: 2000,
     speed: 500,
    // continuous: true,
    // disableScroll: true,
    // stopPropagation: true,
    // callback: function(index, element) {},
    // transitionEnd: function(index, element) {}

  });
*/
</script>
<ol id="weiche-form">
    <li class="hideLi"><span class="label">查询城市：</span>
<span class="select">
<!--省份-->
<select id="slt_province">
					<#if province ??>
						<#list province as o>
							<option index="${o_index+1}" value="${(o.province_code)!''}s">${(o.province)!''}</option>
						</#list>
					</#if>
		  </select>
		 <script>
			<#list carlist as o>
				var  city='${(o.city_code)!}';
					city=city.substring(0, city.indexOf('_'));
				$("#slt_province").find("option[value='"+city+"s"+"']").attr("selected",true);
			</#list>
		 </script> 
		  
</span>


<!--省份包含城市-->
   
              	<#if province ??>
						<#list province as m>
						<span class="select  slt_city"   <#if (m.province_code)! == "BJ" > style="display: none;"</#if>>
				            <select name="${(m.province_code)!''}s">
	              	<#if city??>
							<#list city as o>
					            <#if (m.province_code)! == (o.city)!>
								<option need="<#if (o. regist)! == "1">LICENCE_PLATE,</#if><#if (o.engine)! == "1">ENGINE,</#if><#if (o.classa)! == "1">BODY,</#if>" engine_length="${(o.engineno)!''}"   body_length="${(o.classno)!''}"  licence_prefix="${(o.abbr)!''}"  names="${(o.city_code)!''}" value="${o_index+1}">${(o.city_name)!''}</option> 
					          </#if>
						</#list>
					</#if>
					    </select>
				            </span>
					</#list>
					</#if>
        </li>

<li>
<!--车牌简写-->
<span class="label">车牌号码：</span> 
<span class="select slt_prefix">
<select id="slt_prefix" class="jax-license">
<option index="0" value="京">京</option><option index="1" value="沪">沪
</option><option index="2" value="津">津</option>
<option index="3" value="冀">冀</option>
<option index="4" value="晋">晋</option>
<option index="5" value="蒙">蒙</option>
<option index="6" value="辽">辽</option>
<option index="7" value="吉">吉</option><option index="8" value="黑">黑</option>
<option index="9" value="苏">苏</option><option index="10" value="浙">浙</option>
<option index="11" value="皖">皖</option><option index="12" value="闽">闽</option>
<option index="13" value="赣">赣</option><option index="14" value="鲁">鲁</option>
<option index="15" value="豫">豫</option><option index="16" value="鄂">鄂</option>
<option index="17" value="湘">湘</option><option index="18" value="粤">粤</option>
<option index="19" value="桂">桂</option><option index="20" value="琼">琼</option>
<option index="21" value="渝">渝</option><option index="22" value="川">川</option>
<option index="23" value="贵">贵</option><option index="24" value="云">云</option>
<option index="25" value="藏">藏</option><option index="26" value="陕">陕</option>
<option index="27" value="甘">甘</option><option index="28" value="青">青</option>
<option index="29" value="宁">宁</option><option index="30" value="新">新</option>   
       </select>
</span> 





<input id="license_num"  class="short" type="text" placeholder="请输入车牌号后6位"  maxlength="6"/>
</li>
        <li id="mod_body"><span class="label">车架号码：</span><input id="body_num" type="text" placeholder="请输入完整的车架号"  value=""  maxlength="17" /><div class="notice"></div></li>
    <li id="mod_engine"><span class="label">发动机号：</span><input id="engine_num" type="text" placeholder="请输入完整的发动机号"  value=""   maxlength="15"/><div class="notice"></div></li>
    <li class="btn"><button id="commit">立即查询</button></li>
</ol>
<div id="mask_black"></div>
<img id="helpimg" src="${ctx}/resource/css/help.jpeg"/>
<script type="text/javascript">
  var PARAM = $.parseJSON('{}');
  var $_VID = "${(args)!}";
  var openid="${(openid)!}";
  $('li.hideLi').hide();
  function init_input(){
     if(typeof(PARAM.cid) == 'undefined'){
       PARAM.cid = 1;
     }    
     var $slt_obj = $('span.slt_city>select option[value="'+PARAM.cid+'"]');
  //   $('#slt_province>option[value="'+$slt_obj.parent().attr('name')+'"]').attr('selected',true);
     $slt_obj.parent().parent().css('display','inline-block');
     $slt_obj[0].selected = true;

    
        PARAM.licence_prefix = ($slt_obj.attr('licence_prefix')).replace(/[a-zA-Z]/ig,'');
       
        $('#slt_prefix')[0].selectedIndex = $("#slt_prefix option[value=\""+PARAM.licence_prefix+"\"]").attr('index');

     PARAM.need = $slt_obj.attr('need');
     PARAM.engine_length = $slt_obj.attr('engine_length');
     PARAM.body_length = $slt_obj.attr('body_length');


   
     
     $('#mod_engine').fadeIn();
     $('#mod_body').fadeIn();
     
//      if(PARAM.need.indexOf('ENGINE')<0){
//         $('#mod_engine').hide();
//      }else{
//         $('#mod_engine').fadeIn();
//      }
//      if(PARAM.need.indexOf('BODY')<0){
//         $('#mod_body').hide();
//      }else{
//         $('#mod_body').fadeIn();
//      }
  }
  Zepto(function($){
    dataForWeixin.appMsgTitle = '点击查询我的违章信息';
    dataForWeixin.timeLineTitle = '【'+dataForWeixin.appMsgTitle +"】"+dataForWeixin.appMsgDesc;
      init_input();
      if($_VID !=''){
         $('#commit').text('修改');
      }
      <#list carlist as o>
		var  city='${(o.city_code)!}';
			city=city.substring(0, city.indexOf('_'));
		$("#slt_province").find("option[value='"+city+"s"+"']").attr("selected",true);
	</#list>
      $('li>div.notice').on(TAP,function(e){
          e.preventDefault();
          $('#mask_black').css('display','block');
          $('#helpimg').fadeIn();

      });
      $('#helpimg,#mask_black').on(TAP,function(e){
          e.preventDefault();
          $('#mask_black').css('display','none');
          $('#helpimg').fadeOut();
      });

      $('#slt_province').change(function(){
          var prov_pinyin = $(this).val();
          $('.slt_city').hide();
          PARAM.cid = $('select[name="'+prov_pinyin+'"]').val();
          init_input();
      });
       $('span.slt_city select').change(function(){
          $this = $(this).find('option:selected');
          PARAM.cid =$(this).val();
          init_input();
       });

       $('#commit').click(function(){
          if($('#loading').is(':visible')){
              return false;
          }
          var args = {};
          args.openid=openid;
          if($_VID == ''){
            args.action = 'add';
            PARAM.licence_prefix = $('#slt_prefix').val();
            args.license_number=$.trim($('#license_num').val()).toUpperCase();
            args.license_num = PARAM.licence_prefix+args.license_number.toUpperCase();
            if((args.license_num).length !=7 ){
                alert('*请仔细填写车牌号');
                return false;
            }
          }else{
        	   PARAM.licence_prefix = $('#slt_prefix').val();
               args.license_number=$.trim($('#license_num').val()).toUpperCase();
               args.license_num = PARAM.licence_prefix+args.license_number;
        	  if((args.license_num).length !=7 ){
                  alert('*请仔细填写车牌号');
                  return false;
              }
            args.args = $_VID;
            args.action = 'modify';
          
          }

          args.cid = PARAM.cid;
          args.engine_num =$.trim($('#engine_num').val());
          args.body_num =$.trim($('#body_num').val());

     /*      if(args.cid==''){
            alert('*请选择一个查询地城市');
            return false;
          } */
          args.city_name = $('span.slt_city:visible').find('select>option:selected').text();
          args.city_code = $('span.slt_city:visible').find('select>option:selected').attr("names");
			var enginnum=$("#engine_num").attr("value");
              if(enginnum ==''){
                   alert('*请填写发动机号');
                   return false;
              }
        
/*               if(PARAM.engine_length>0 && args.engine_num.length != PARAM.engine_length){
 */           
 			if(enginnum.length!=15){
 				alert('*请输入您完整的发动机号');
                  return false;
              }
       	   var bodynum= $("#body_num").attr("value");
      
              if(bodynum ==''){
                 alert('*请填写车架号');
                 return false;
              }
              if(bodynum.length!=17){
                  alert('*请输入您完整的车架号');
                  return false;
              }
          Jax.loading();
          $.post('${ctx}/wzcx/queryjson',args,function(msg){
        	  
             try{
                var obj = msg;
                if(obj.msg == 'ok'){
                  Jax.loaded_delay();
                  if(obj.id){
                    location.replace('${ctx}/wzcx/violations?'+obj.id);
                  }else{
                    location.replace('${ctx}/wzcx/vehicle_list');
                  }

                }else{
                  alert('操作失败 , 请稍后再试');
                  Jax.loaded();
                }
             }catch(e){
                alert('操作失败 , 请稍后再试');
                 Jax.loaded();
             }
          });

       });
   	<#if carlist ??>
	<#list carlist as o>
		$("#license_num").attr("value","${(o.hphm)?substring(1,7)}");
		$("#body_num").attr("value","${(o.body_num)!''}");
		$("#engine_num").attr("value","${(o.engine_num)!''}");
		$("#slt_prefix").find("option[value='${(o.hphm)?substring(0,1)}']").attr("selected",true);
		var  city='${(o.city_code)!}';
		if(city.indexOf("_")>0){
			city=city.substring(0, city.indexOf('_'));
		}
		$("#slt_province").find("option[value='"+city+"s"+"']").attr("selected",true);
		//$('select[name="'+city+'"]').find("option[names='${(o.city_code)!}']").attr("selected",true);
		var  sel=$('select[name="'+city+"s"+'"]').find("option[names='${(o.city_code)!}']");
		$("select[name='"+city+"s"+"']").find("option[names='${(o.city_code)!}']").attr("selected",true);
		$('.slt_city').hide();
		sel.parent().parent().css('display','inline-block');
		var need =$('select[name="'+city+"s"+'"]').find("option[names='${(o.city_code)!}']").attr("need");
		 if(need.indexOf('ENGINE')<0){
		        $('#mod_engine').hide();
		     }else{
		        $('#mod_engine').fadeIn();
		     }
		     if(need.indexOf('BODY')<0){
		        $('#mod_body').hide();
		     }else{
		        $('#mod_body').fadeIn();
		     }
		   
		     PARAM.cid =  $('select[name="'+city+"s"+'"]').find("option[names='${(o.city_code)!}']").attr("value");
	          init_input();
	</#list>
</#if>
  });
</script>
    </div>
    <style type="text/css">
       #mask,#mask_black{position:fixed;top:0;width:100%;height:100%;left:0;background: #fff;opacity: 0.7;display: none}
       #mask_black{background: #000}
       img.loading{position: fixed;width: 80px;z-index:9999;display: none; left: 50%; top: 50%; margin-left:-40px; margin-top:-40px; /*transform: translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);*/}
       #follow-us{max-width:640px;min-width:320px;background: #fff;opacity: 0.94;padding-top:15px;padding-bottom:15px;width:100%;position: fixed;top:-140px;z-index: 99999;border-bottom:1px solid #ddd;box-shadow:0px 0px 4px #ddd;display: none;}
        #follow-us img{width:60px;border-radius: 5px;float:left;margin-top: 2px;margin-left:20px;}
        #follow-us p{font-size:14px;line-height: 1.5;padding-left: 95px;}
        #follow-us p b{color:#16d24c;}
        #follow-us p.pbtn{text-align:center;padding:0px;margin:0;font-size:12px;margin-top:10px;}
        #follow-us p.pbtn>button{font-size: 14px; padding-bottom: 9px;padding-top: 9px;border-radius: 2px 10px; width: 35%;}
        button { color: #004995; padding-top: 5px; padding-bottom: 5px; width: 50%; -webkit-appearance: none; border: 0; background: #55C126; color: #FFF; font-size: 18px; padding-top: 13px; padding-bottom: 13px; border-radius: 2px 15px 2px 15px;}
    </style>
     <div id="mask"></div>
             <img src="${ctx}/resource/css/load.gif"   class="loading"/>
     
     <script type="text/javascript" src="${ctx}/resource/js/wechat.min.v1.js"></script>
     <script type="text/javascript">
      
     </script>
    </body>
</html>
